<template>
  <div class="section_common">
    <div class="main">
      <el-form ref="form" label-width="100px">
        <el-form-item label="采购类型" required>
          <el-select v-model="cgType" :filterable="true" size="mini" placeholder="请选择">
            <!--<el-option v-for="(item,index) in specs" :key="index"  :label="item.label" :value="item.value"></el-option>-->
            <el-option value="单个采购" ></el-option>
            <el-option value="批量采购"></el-option>
            <el-option value="库存采购"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="序号" required>
          <el-input v-model="cgId" size="mini" readonly></el-input>
        </el-form-item>
        <el-form-item v-show="cgType=='单个采购'" label="物品分类" required>
          <el-select v-model="itemSpec" :filterable="true" size="mini" placeholder="请选择">
            <el-option v-for="(item,index) in itemSpecs" :key="index"  :label="item" :value="item" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-show="cgType=='单个采购'" label="物品名称" required>
          <!--<el-select v-model="itemName" :filterable="true" size="mini" placeholder="请选择" onchange="changeItem">
            <el-option v-for="(item,index) in itemNames" :key="index"  :label="item.label" :value="item.value"></el-option>
          </el-select>-->
          <el-input v-model="itemName" size="mini"   ></el-input>
        </el-form-item>

        <el-form-item v-show="cgType=='单个采购'" label="型号" required>
          <!--<el-select v-model="type" :filterable="true" size="mini" placeholder="请选择">
            <el-option v-for="(item,index) in types" :key="index"  :label="item.label" :value="item.value"></el-option>
          </el-select>-->
          <el-input v-model="type" size="mini"   ></el-input>
        </el-form-item>

        <el-form-item v-show="cgType=='单个采购'" label="物品规格" required>
          <el-select v-model="spec" :filterable="true" size="mini" placeholder="请选择">
            <!--<el-option v-for="(item,index) in specs" :key="index"  :label="item.label" :value="item.value"></el-option>-->
            <el-option value="个"></el-option>
            <el-option value="把"></el-option>
            <el-option value="只"></el-option>
            <el-option value="张"></el-option>
            <el-option value="台"></el-option>
            <el-option value="件"></el-option>
            <el-option value="支"></el-option>
            <el-option value="本"></el-option>
            <el-option value="套"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-show="cgType=='单个采购'" label="数量" required>
          <el-input v-model="num" size="mini" type="number"  ></el-input>
        </el-form-item>
        <el-form-item v-show="cgType=='单个采购'" label="单价" required>
          <el-input v-model="unitPrice" size="mini" type="number" ></el-input>
        </el-form-item>
        <el-form-item v-show="cgType=='单个采购'" label="总价" required>
          <el-input v-model="chengfa" size="mini" type="number"></el-input>
        </el-form-item>


        <el-form-item label="采购原因" required>
          <el-input v-model="purchaseReason" size="mini"></el-input>
        </el-form-item>
        <el-form-item v-show="cgType=='单个采购'" label="采购链接" required>
          <el-input v-model="purchaseLink" size="mini"></el-input>
        </el-form-item>
        <el-form-item v-show="cgType!='单个采购'" label="附件模板" required>
          <a href="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/09/09/1631181141237.xlsx">摄影器材采购模板.xlsx</a>
        </el-form-item>
        <el-form-item label="附件" required>
          <!--<el-upload
            action="#"
            class="upload-demo"
            :on-change="handleChange"
            :file-list="fileList"
            :multiple="false"
            :limit="1"
            list-type
          >
            <el-button size="mini" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip"></div>
          </el-upload>-->
          <input id="file" class="file-upload-input" ref="inputer" type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" @change="afterRead()">
        </el-form-item>


        <van-steps direction="vertical" :active="active" active-icon="checked" active-color="#38f">
          <van-step v-show="oneShow">
            <van-image v-for="(item,index) in oneLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
              <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
            </van-image>
          </van-step>
          <van-step v-show="twoShow">
            <van-image v-for="(item,index) in twoLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
              <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
            </van-image>
          </van-step>
          <van-step v-show="threeShow">
            <van-image v-for="(item,index) in threeLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
              <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
            </van-image>
          </van-step>
          <van-step v-show="fourShow">
            <van-image v-for="(item,index) in fourLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
              <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
            </van-image>
          </van-step>

            <p style="font-size: 15px ;justify-content: center">抄送人：</p>
            <van-image src="http://wework.qpic.cn/wwhead/duc2TvpEgSSWiaVLaJnssaQhAwV9wqgTueeE8IC2UCp8BG20aDWFTWZZ895sRylCibRzNRMoGqJ3w/0" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
              <p style="font-size: 10px ;justify-content: center">邹威</p>
            </van-image>
          <van-image src="http://p.qlogo.cn/bizmail/ZPPn13Xo62F3eQicpZlTyyEicYk2KVwmqicuLllkeCCoj0xm4wXNGsiaDw/0" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
            <p style="font-size: 10px ;justify-content: center">李佩蓝</p>
          </van-image>


        </van-steps>

        <el-form-item>
          <el-button type="primary" size="mini" @click="onSubmit" >提交</el-button>
        </el-form-item>


        <!--<el-form-item>
          <el-button type="primary" size="mini" @click="onSubmit">提交</el-button>
        </el-form-item>-->
      </el-form>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { Toast, Calendar,Form  } from "vant";
  import { Image as VanImage } from 'vant';

  Vue.use(VanImage);
  Vue.use(Calendar);
  Vue.use(Form);
export default {

  data() {
    return {
      wpData:'',


      fileList: [{fileId:""}],
      fileName:"",
      fileUrl:"",

      cgType:'单个采购',//单个采购1，批量采购2  默认是单个采购
      itemSpec:'',
      itemSpecs:['器材类' , '道具类' , '模特类' , '消耗品' , '器材辅件' , '常规办公','其他'],
      cgId:'',
      itemName:'',
      itemNames:[],
      type:'',
      types:[],
      spec:'',
      specs:[],
      num:'',
      unitPrice:'',
      totalPrice:'',
      purchaseReason:'',
      purchaseLink:'',
      active:"-1",//步骤索引,从0开始
      oneShow:false,//审批是否显示
      oneLd:[],
      twoShow:false,
      twoLd:[],
      threeShow:false,
      threeLd:[],
      fourShow:false,
      fourLd:[],

    };
  },
  watch:{
    cgType:function (value,oldCgType) {
        console.log(value)
        console.log(oldCgType)
      this.$https.post('/mobiles/getCgXuhao',{
        cgType:value,
      }).then((res)=>{
        console.log(res.data)
        this.cgId = res.data.data;
      })
    }
  },
  created() {
    this.nowUser=JSON.parse(localStorage.getItem('userInfo')).userId;
    this.getLd();
    this.getCgXuhao();
  },
  computed:{
    chengfa(){

      return parseInt(this.num) * parseFloat(this.unitPrice);
    }

  },
  methods: {
    /*changeItem(){
      this.itemName
      this.wpData.for


    },
    /*chengfa(){
      this.totalPrice= parseInt(this.num) * parseFloat(this.unitPrice);
    },*/

    /*formatArea(data,curr){
      if(data){
        for(let i=0;i<data.length;i++){
          console.log(data[i])
          curr.push({
            label:data[i],
            value:data[i],
          })
        }
        console.log(curr)
      }
    },*/

    getCgXuhao(){
      this.$https.post('/mobiles/getCgXuhao',{
        cgType:this.cgType,
      }).then((res)=>{
        console.log(res.data)
        this.cgId = res.data.data;
      })
    },
    //查找对应用户的上级领导进行审批
    getLd(){
      this.$https.post('/mobiles/getPLeader',{
        userId:this.nowUser,
      }).then((res)=>{
        if (res.data.data.onespusers.length>0){
          this.oneShow=true;
          this.oneLd=res.data.data.onespusers;
        }
        if (res.data.data.twospusers.length>0){
          this.twoShow=true;
          this.twoLd=res.data.data.twospusers;
        }
        if (res.data.data.threespusers.length>0){
          this.threeShow=true;
          this.threeLd=res.data.data.threespusers;
        }
        if (res.data.data.fourspusers.length>0){
          this.fourShow=true;
          this.fourLd=res.data.data.fourspusers;
        }
      }).catch(err => {
        console.log(err);
      })
    },
    /*getToolStock(){
      this.$https.get('/mobiles/toolStock').then((res)=>{
        console.log(res)
        this.wpData = res.data.data;
        this.formatLacation(this.data,this.itemNames,'itemName','itemName')
        this.formatLacation(this.data,this.types,'type','type')
        // this.formatLacation(this.data,this.specs,'spec','spec')
      }).catch(err => {
        console.log(err);
      })
    },
    //格式化物品归宿地
    formatLacation(data,curr,foo,id){
      if(data){
        console.log(foo)
        for(let i=0;i<data.length;i++){
          console.log(data[i])
          curr.push({
            label:data[i][foo],
            value:data[i][id],
          })
        }
        console.log(curr)
      }
    },*/
    // 返回
    goBack() {
      this.$router.go(-1);
    },
    onSubmit() {
      if (!this.isNull()) return false;
      //提交事件
      this.show=false;
      this.$https.post('/mobiles/photographPurchase', {
        userId:this.nowUser,
        cgId:this.cgId,
        cgType:this.cgType,
        itemSpec:this.itemSpec,
        itemName:this.itemName,
        type:this.type,
        spec:this.spec,
        num:this.num,
        unitPrice:this.unitPrice,
        totalPrice:parseInt(this.num) * parseFloat(this.unitPrice),
        purchaseReason:this.purchaseReason,
        purchaseLink:this.purchaseLink,
        fileId:this.fileList[this.fileList.length-1].fileId,
      }).then(res => {
        console.log(res.data)
        if (res.data.code === 200){
          Toast("申请成功");
          this.goBack();
        }else {
          Toast(res.data.message + res.data.data);
        }
      }).catch(err => {
        console.log(err)
      });
    },
    //监听上传变动
    afterRead() {
      let formData = new FormData();
      //console.log(this.$refs.inputer);
      var fs=this.$refs.inputer.files;
      for (let i = 0; i < fs.length; i++) {
        formData.append("fileList", fs[i]);  //文件上传处理
      }
      this.$https.post('/mobiles/uploadFile',formData,{
        timeout: 0, //无超时时间
        headers: { "Content-Type": "multipart/form-data" }
      }).then(res => {
        console.log(res)
        this.fileList=res.data.data;
        this.fileName=this.fileList[this.fileList.length-1].fileName;
        this.fileUrl=this.fileList[this.fileList.length-1].filePath;
        Toast("上传完成");
      }).catch(err => {
        console.log(err);
      })
    },
    //判断相关数据是否为空
    isNull() {
      if (this.cgType=='') {
        this.$toast("分类不能为空");
        return false;
      }
      if (this.cgType=='单个采购' && this.itemName == '') {
        this.$toast("物品名称不能为空");
        return false;
      }
      if (this.cgType=='单个采购' && this.itemSpec == '') {
        this.$toast("物品分类不能为空");
        return false;
      }
      if (this.cgType=='单个采购' && this.type=='') {
        this.$toast("型号不能为空");
        return false;
      }
      if (this.cgType=='单个采购' && this.spec=='') {
        this.$toast("请选择规格");
        return false;
      }
      if (this.cgType=='单个采购' && this.num=='') {
        this.$toast("数量不能为空");
        return false;
      }
      if (this.purchaseReason=='') {
        this.$toast("采购原因不能为空");
        return false;
      }
      if (this.cgType=='单个采购' && this.purchaseLink=='') {
        this.$toast("采购链接不能为空");
        return false;
      }
      return true;
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  justify-items: center;
  margin: 0 auto;
  .el-form {
    padding-right: 10px;
    .el-form-item {
      .el-form-item__label {
        line-height: 16px;
      }
      margin-bottom: 5px;
    }
  }
}
</style>
